<template>
	  <scroll-view scroll-x="true" class="ikz-tab-top ikz-tab-top-fixed" :scroll-left="scrollLeft" style="border-bottom:1rpx solid #e5e5e5;display:flex;background:#fff;">
	
	    <view v-for="(item,index) in showData.list" :key="index"  class="ikz-tab-top-item" :style="currentTab == index ? 'color:#000000;border-bottom:5rpx  #247EFF solid;font-weight: bold;' :''" @click="currentIndex(index)">
	      {{item.name}}
	    </view>
	  </scroll-view>
</template>

<script>
	var app = getApp();
	import ikz from '@/pages/Common/tools.js'
	export default {
		name: 'topmenu',
		props: {
			showData: {
				type: Object,
			},
			cssData:{
				type: Object,
			},
      dataIndex:{
        type: Number,
        default:false,
      }
		},
		data() {
			return {
        currentTab:0
			};
		},
		mounted() {
      
		},
    watch: {
      dataIndex: {
        handler(newName, oldName) {
          console.log(newName)
          if(newName!=this.currentTab){
            this.currentTab = newName;
          }
        },
        immediate: true,
        deep: true
      }
    },
		methods: {
      currentIndex(index){
        this.currentTab = index;
        this.$emit('returnIndex',index);
      }
		}
	};
</script>

<style>
	/* 顶部菜单栏样式开始 */
	.ikz-tab-top {
	  height: 85rpx;
	  width: 100%;
	  box-sizing: border-box;
	  overflow: hidden;
	  line-height: 75rpx;
	  background: #f7f7f7;
	  font-size: 16px;
	  white-space: nowrap;
	  z-index: 99;
	}
	.ikz-tab-top-fixed{
	   position: fixed;
	   top: 0;
	   left: 0; 
	}
	
	.ikz-tab-top-item {
	  margin: 0 30rpx 0rpx 30rpx;
	  display: inline-block;
	  font-size:28rpx;
	  box-sizing: border-box;
	  
	}
	/* 顶部菜单栏样式结束 */
	
	
	/* 左侧菜单栏样式开始 */
	.ikz-tab-side {
	  box-sizing: border-box;
	  background: #f7f7f7;
	  z-index: 99;
	}
	
	.ikz-tab-side-item {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  border-bottom:1rpx solid #eee;
	  text-align: center;
	  font-size:25rpx;
	  padding: 10rpx;
	  min-height: 80rpx;
	}
	
	/* 左侧菜单栏样式结束 */
	

</style>
